<template>
	<view v-if="detail">
		<view class="collection_box" >
      <image :src="detail.cover"></image>
      <view class="collection_detail">
        <view>{{ detail.name }}</view>
        <view>拥有数量:{{ detail.has_product_num }}</view>
        <view>
          <image :src="detail.creator_avatar"></image>
          {{ detail.creator_name  }}
        </view>
      </view>
    </view>

    <view style="margin-left: 30rpx;">请输入销毁数量</view>
    <view class="input_box">
      <input v-model="inputvalue" placeholder="请输入销毁数量12" type="number" inputmode="numeric" @input="handleInput">
      <text @click="inputvalue = detail.has_product_num">最大</text>
    </view>

    <view class="bottom_box">
      <view>提现额度  {{ (inputvalue||0) * detail.amount  }}</view>
      <button @click="show_transaction = true">确认销毁</button>
    </view>

    <u-popup
      v-model="show_transaction"
      mode="center"
      width="490rpx"
      height="290rpx"
      :border-radius="24"
      :closeable="true"
      :mask-close-able="false"
      @close="operation_password = ''"
    >
      <view class="Transaction_eject">
        <text class="Transaction_top">输入交易密码</text>
        <input
          class="Transaction_center"
          :readonly="true"
          v-model="operation_password"
        />
        
        <text class="Transaction_bottom" @click="destruction">确定</text>
      </view>
    </u-popup>
	</view>
</template>

<script>
import api from "../../api/api";
import tip from "@/utils/tip.js";
	export default {
		data() {
			return {
				inputvalue:'',
        detail:null,
        product_id:null,
        show_transaction:false,
        operation_password:'',
			}
		},
		methods: {
       handleInput(event) {
        const inputValue = event.target.value;
        const integerRegex = /^\d*$/;
        if (!integerRegex.test(inputValue)) {
          this.inputvalue = '';
        }
      },
			async getburnDetail(product_id){
        let { data } = await api.burnDetail({
          method:'get',
          loading:'加载中',
          query:{ product_id }
        })
        this.detail = data
      },
      async destruction(){
        if(!this.inputvalue.toString().length) return tip.defaults('请输入销毁数量'); 
        if(!this.operation_password) return tip.defaults('请输入交易密码'); 
        if(this.inputvalue > this.detail.has_product_num) return tip.defaults('藏品不足');
        let { code,data,msg } = await api.burnForCash({
          method:'POST',
          loading:'加载中',
          query:{
            product_id:this.product_id,num:this.inputvalue,operation_password:this.operation_password
          },
        })
        if(code == 0){
          tip.defaults('提现成功')
          this.detail.has_product_num -= this.inputvalue
          this.inputvalue = ''
          this.show_transaction = false
        }else{
          tip.defaults(msg);
        }
      }
		},
    onLoad(options){
      this.product_id = options.id
      this.getburnDetail(options.id)
    }
	}
</script>

<style lang="scss">
@import "../../style/yuanchuang.scss";
page{
  color: #ffffff;
  padding: 1rpx;
}
.collection_box{
  height: 220rpx;
  display: flex;
  background-color: #292B2B;
  margin: 30rpx;
  border-radius: 24rpx;
  image{
    width: 220rpx;
    height: 220rpx;
    border-radius: 24rpx 0 0 24rpx;
    flex-shrink: 0;
  }
  .collection_detail{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 30rpx;
    gap: 20rpx;
  }
  view{
    overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    image{
      width: 36rpx;
      height: 36rpx;
      border-radius: 50%;
      vertical-align: text-top;
      margin-right: 15rpx;
    }
  }
}
.input_box{
  position: relative;
  margin: 30rpx;
  input{
    height: 100rpx;
    line-height: 100rpx;
    background: #292B2B;
    border-radius: 24rpx;
    color: #ffffff !important;
    padding-left: 30rpx;
  }
  text{
    position: absolute;
    right: 0;
    top: 0;
    line-height: 100rpx;
    padding-right: 30rpx;
    color: #1FE6E6;
    text-decoration: underline;
  }
}
.bottom_box{
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 110rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 32rpx;
  padding: 0 30rpx;
  background-color: #292B2B;
  button{
    background: linear-gradient(90deg, #1FE6E6 0%, #3F9ED2 48%, #DF7FD6 100%);
    margin: unset;
    padding: unset;
    width: 192rpx;
    height: 68rpx;
    line-height: 68rpx;
    border-radius: 34rpx;
    color: #ffffff;
    font-size: 28rpx;
  }
}
.Transaction_eject {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 290rpx;
  background-color: $bg-color1;
  .Transaction_top {
    margin-top: 50rpx;
    font-size: 32rpx;
    color: $text-color1;
  }
  .Transaction_center {
    padding: 0 20rpx;
    border: 2rpx solid #262934;
    background: $bg-color3;
    border-radius: 16rpx;
    height: 85rpx;
    width: 80%;
    color: #ffffff;
    -webkit-text-security: disc; /* Safari/Chrome */
    -moz-text-security: disc; /* Firefox */
    text-security: disc; /* Standard syntax */
  }
  .Transaction_bottom {
    font-size: 32rpx;
    color: $text-color1;
    margin-bottom: 30rpx;
  }
}
</style>
